<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <el-form :inline="true">
        <el-form-item>
          <el-input
            v-model="pagination.queryParams.stuName"
            placeholder="学生姓名"
            clearable>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" icon="el-icon-search" @click="handleCurrentChange(1)">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-popconfirm title="确定审核该简历不通过简历筛选吗？" @confirm="handleResumeReject()">
            <el-button type="danger" size="mini" slot="reference" :disabled="delBtnStatus" icon="el-icon-delete" >简历不通过</el-button>
          </el-popconfirm>
        </el-form-item>
        <el-form-item>
          <el-popconfirm title="确定审核该简历通过简历筛选吗？" @confirm="handleResumePass()">
            <el-button type="primary" size="mini" icon="el-icon-plus"  slot="reference" :disabled="delBtnStatus" >简历通过</el-button>
          </el-popconfirm>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="table-container">
      <el-table
        ref="multipleTable"
        :data="dataList"
        tooltip-effect="dark"
        style="width: 100%"
        border
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="stuName"
          label="学生姓名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="联系电话"
          width="120">
        </el-table-column>
        <el-table-column
          prop="email"
          label="学生邮箱"
          width="160">
        </el-table-column>
        <el-table-column
          prop="description"
          label="学生性格自述"
          width="400">
        </el-table-column>
        <el-table-column
          prop="postName"
          label="申请职位"
          width="250">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态">
          <template slot-scope="scope">
            <el-tag size="small" v-if="scope.row.status === 0" type="success">待审核</el-tag>
            <el-tag size="small" v-else-if="scope.row.status === 2" type="danger">符合要求</el-tag>
            <el-tag size="small" v-else-if="scope.row.status === 3" type="danger">不合适</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="icon"
          label="操作">
          <template slot-scope="scope">
            <el-button type="success" size="mini" icon="el-icon-view" @click="handleSeeResume(scope.row)" >查看学生简历</el-button>
            <el-button type="success" size="mini" icon="el-icon-view" @click="handleSeeStudentInfo(scope.row)" >查看学生个人信息</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        :total="pagination.total"
        :page-sizes="[10, 20, 50, 100]"
        @current-change=""
        @size-change="handleSizeChange"
        layout="total,sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>
    <!--查看学生简历信息窗口-->
    <el-dialog
      title="查看学生简历信息窗口"
      :visible.sync="dialogFormVisible"
      width="1200px"
      :before-close="handleSeeResumeClose">
      <el-row :gutter="20">
        <!--求职状态选项卡-->
        <el-col :span="24">
          <el-menu default-active="1" class="el-menu-demo" mode="horizontal">
            <el-menu-item index="1"><span style="font-weight: bolder;font-size: 20px; color: #2788f3;">个人简历</span></el-menu-item>
          </el-menu>
        </el-col>
        <!--求职状态选项卡-->
        <!--简历展示容器-->
        <el-col :span="24">
          <el-card
            style="
            margin-top: 10px;
            padding-bottom: 10px;
            width: 100%;
            border: 3px solid #FFFFFF;
            box-shadow: 1px 2px 5px #999999;"
            shadow="hover">
            <el-col :span="19" style="border: 3px solid #999999;">
              <template v-if="resume">
                <el-collapse  v-model="activeNames">
                  <el-collapse-item name="1" >
                    <template slot="title">
                      <h2 style="color: mediumvioletred">{{resume.studentName}}的个人简历<i class="header-icon el-icon-info"></i></h2>
                    </template>
                    <div>
                      <el-divider content-position="left"><span style="font-weight: bolder;color: #2788f3">求职状态</span></el-divider>
                      <el-tag size="medium"
                              effect="plain"
                              type="danger">
                        {{resume.jobStatus}}
                      </el-tag>
                    </div>
                    <el-divider content-position="left"><span style="font-weight: bolder;color: #2788f3">简历描述</span></el-divider>
                    <div>{{resume.remark}}</div>
                    <el-divider content-position="left"><span style="font-weight: bolder;color: #2788f3">求职意向</span></el-divider>
                    <!--求职意向列表展示-->
                    <div style="clear: both;">
                      <el-card
                        style="
                          margin-top: 10px;
                          padding-bottom: 10px;
                          box-shadow: 1px 2px 5px #999999;
                          width: 100%;"
                        shadow="hover">
                        <template v-if="resume.intentionList.length != 0">
                          <el-descriptions :key="item.id"  v-for="(item,index) in resume.intentionList"   style="padding: 20px;color: red;"  :title="item.name" :column="2">
                            <el-descriptions-item label="薪资要求">{{item.salary}}</el-descriptions-item>
                            <el-descriptions-item label="期望城市">{{item.city}}</el-descriptions-item>
                            <el-descriptions-item label="工作性质">{{item.workType}}</el-descriptions-item>
                            <el-descriptions-item label="期望行业">
                              <template v-for="(item,index) in item.industryList" >
                                <span>{{item}}</span>
                                <el-divider direction="vertical"></el-divider>
                              </template>
                            </el-descriptions-item>
                          </el-descriptions>
                        </template>
                        <template v-else>
                          <el-result icon="info" title="新增信息提示" subTitle="当前您的简历还没有求职意向方面的说明哦！">
                            <template slot="extra">
                              <el-empty description="快新增增求职意向吧！"></el-empty>
                            </template>
                          </el-result>
                        </template>
                      </el-card>
                    </div>
                    <!--求职意向列表展示-->
                    <el-divider content-position="left"><span style="font-weight: bolder;color: #2788f3">项目经历</span></el-divider>
                    <!--项目经历列表展示-->
                    <div style="clear: both;">
                      <el-card
                        style="
                              margin-top: 10px;
                              padding-bottom: 10px;
                              box-shadow: 1px 2px 5px #8c939d;
                              width: 100%;"
                        shadow="hover">
                        <template v-if="resume.projectList.length != 0">
                          <el-descriptions v-for="(item,index) in resume.projectList" :key="item.id"  style="padding: 20px;color: red;"  :title="item.name" :column="2">
                            <el-descriptions-item label="项目名称">{{item.name}}</el-descriptions-item>
                            <el-descriptions-item label="开始时间">{{item.beginTime}}</el-descriptions-item>
                            <el-descriptions-item label="结束时间">{{item.endTime}}</el-descriptions-item>
                            <el-descriptions-item label="项目简述">{{item.description}}</el-descriptions-item>
                          </el-descriptions>
                        </template>
                        <template v-else>
                          <el-result icon="info" title="新增信息提示" subTitle="当前您的简历还没有求职意向方面的说明哦！">
                            <template slot="extra">
                              <el-empty description="快新增增求职意向吧！"></el-empty>
                            </template>
                          </el-result>
                        </template>
                      </el-card>
                    </div>
                    <!--项目经历列表展示-->
                    <el-divider content-position="left"><span style="font-weight: bolder;color: #2788f3">培训经历</span></el-divider>
                    <!--培训经历列表展示-->
                    <div style="clear: both;">
                      <el-card
                        style="
                            margin-top: 10px;
                            padding-bottom: 10px;
                            box-shadow: 1px 2px 5px #8c939d;
                            width: 100%;"
                        shadow="hover">
                        <template v-if="resume.trainList.length != 0">
                          <el-descriptions v-for="(item,index) in resume.trainList" :key="item.id"    style="padding: 20px;color: red;"  :title="item.course" :column="2">
                            <el-descriptions-item label="培训机构(公司)">{{item.trainCompany}}</el-descriptions-item>
                            <el-descriptions-item label="培训开始时间">{{item.beginTime}}</el-descriptions-item>
                            <el-descriptions-item label="培训结束时间">{{item.endTime}}</el-descriptions-item>
                            <el-descriptions-item label="培训课程">{{item.course}}</el-descriptions-item>
                          </el-descriptions>
                        </template>
                        <template v-else>
                          <el-result icon="info" title="新增信息提示" subTitle="当前您的简历还没有培训经历方面的说明哦！">
                            <template slot="extra">
                              <el-empty description="快新增增培训经历吧！"></el-empty>
                            </template>
                          </el-result>
                        </template>
                      </el-card>
                    </div>
                    <!--培训经历列表展示-->
                    <el-divider content-position="left"><span style="font-weight: bolder;color: #2788f3">荣誉证书</span></el-divider>
                    <!--荣誉证书列表展示-->
                    <div style="clear: both;">
                      <el-card
                        style="
                            margin-top: 10px;
                            padding-bottom: 10px;
                            box-shadow: 1px 2px 5px #8c939d;
                            width: 100%;"
                        shadow="hover">
                        <template v-if="resume.certificateList.length != 0">
                          <el-descriptions v-for="(item,index) in resume.certificateList" :key="item.id"    style="padding: 20px;color: red;"  :title="item.name" :column="2">
                            <el-descriptions-item label="证书名称">{{item.name}}</el-descriptions-item>
                            <el-descriptions-item label="获得时间">{{item.createTime}}</el-descriptions-item>
                          </el-descriptions>
                        </template>
                        <template v-else>
                          <el-result icon="info" title="新增信息提示" subTitle="当前您的简历还没有荣誉证书方面的说明哦！">
                            <template slot="extra">
                              <el-empty description="快新增增荣誉证书吧！"></el-empty>
                            </template>
                          </el-result>
                        </template>
                      </el-card>
                    </div>
                    <!--荣誉证书列表展示-->
                    <el-divider content-position="left"><span style="font-weight: bolder;color: #2788f3">学生干部经历</span></el-divider>
                    <!--学生干部列表展示-->
                    <div style="clear: both;">
                      <el-card
                        style="
                            margin-top: 10px;
                            padding-bottom: 10px;
                            box-shadow: 1px 2px 5px #8c939d;
                            width: 100%;"
                        shadow="hover">
                        <template v-if="resume.studentCadreList.length != 0">
                          <el-descriptions v-for="(item,index) in resume.studentCadreList" :key="item.id"    style="padding: 20px;color: red;"  :title="item.name" :column="2">
                            <el-descriptions-item label="干部类型">{{item.type}}</el-descriptions-item>
                            <el-descriptions-item label="干部职务">{{item.name}}</el-descriptions-item>
                            <el-descriptions-item label="任职开始时间">{{item.beginTime}}</el-descriptions-item>
                            <el-descriptions-item label="任职结束时间">{{item.endTime}}</el-descriptions-item>
                          </el-descriptions>
                        </template>
                        <template v-else>
                          <el-result icon="info" title="新增信息提示" subTitle="当前您的简历还没有学生干部方面的说明哦！">
                            <template slot="extra">
                              <el-empty description="快新增增学生干部吧！"></el-empty>
                            </template>
                          </el-result>
                        </template>
                      </el-card>
                    </div>
                    <!--学生干部列表展示-->
                  </el-collapse-item>
                </el-collapse>
              </template>
              <template v-else>
                <div style="float: left">
                  <el-image
                    style="width: 400px; height: 300px;padding: 20px;"
                    fit="fit"
                    src="https://gxuwz-wnx.oss-cn-beijing.aliyuncs.com/images/%E6%B1%82%E8%81%8C%E7%AE%80%E5%8E%86%E9%85%8D%E5%9B%BE.jpg">
                  </el-image>
                </div>
                <div style="float: right; width: 600px; margin-right: 30px;">
                  <div style="text-align: center;font-weight: bolder;">
                    <span style="color: indianred">头上一片晴天</span>
                    <el-divider direction="vertical"></el-divider>
                    <span style="color: indianred">心中一个想念</span>
                    <el-divider content-position="right">少年包青天</el-divider>
                  </div>
                  <div>
                    <h3>【成都】 ——赵雷</h3>
                    <p>让我掉下眼泪的 ,不止昨夜的酒</p>
                    <p>让我依依不舍的,不止你的温柔,余路还要走多久,你攥着我的手,让我感到为难的,是挣扎的自由</p>
                    <p>分别总是在九月,回忆是思念的愁</p>
                    <p>深秋嫩绿的垂柳, 亲吻着我额头</p>
                    <p>在那座阴雨的小城里,我从未忘记你, 成都 带不走的 只有你.</p>
                    <p>在那座阴雨的小城里,我从未忘记你, 成都 带不走的 只有你.</p>
                  </div>
                  <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
                </div>
              </template>
            </el-col>
          </el-card>
        </el-col>
        <!--简历展示容器-->
      </el-row>
    </el-dialog>
    <!--查看学生简历信息窗口-->
    <!--查看学生信息-->
    <el-dialog
      title="查看学生信息窗口"
      :visible.sync="dialogStudentInfoFormVisible"
      :before-close="handleSeeStudentInfoClose">
      <div>
        <el-card
          style="
            margin-top: 10px;
            padding-bottom: 10px;
            box-shadow: 1px 2px 5px #999999;
            width: 100%;"
          shadow="hover">
        <!--个人信息选项卡-->
        <el-col :span="24">
          <el-menu default-active="1" class="el-menu-demo" mode="horizontal">
            <el-menu-item index="1"><span style="font-weight: bolder;font-size: 20px; color: #2788f3;">个人信息</span></el-menu-item>
          </el-menu>
        </el-col>
        <!--个人信息选项卡-->
        <!--个人信息选项卡容器-->
        <el-col :span="24">
          <div class="profile-pre-info">
            <div>
              <el-divider><i class="el-icon-mobile-phone"></i>个人信息</el-divider>
              <el-descriptions title="【学生基础信息】" style="color: indianred;" direction="vertical" :column="5" border>
                <el-descriptions-item label="学生姓名">{{studentInfo.name}}</el-descriptions-item>
                <el-descriptions-item label="学生学号">{{studentInfo.account}}</el-descriptions-item>
                <el-descriptions-item label="学生生日">{{studentInfo.birthday}}</el-descriptions-item>
                <el-descriptions-item label="学生专业">{{studentInfo.profession}}</el-descriptions-item>
                <el-descriptions-item label="学生院校">{{studentInfo.college}}</el-descriptions-item>
                <el-descriptions-item label="受教育程度">{{studentInfo.education}}</el-descriptions-item>
                <el-descriptions-item label="电话">{{studentInfo.phone}}</el-descriptions-item>
                <el-descriptions-item label="性别">
                  <el-tag size="small" v-if="studentInfo.sex === 1" type="success">男</el-tag>
                  <el-tag size="small" v-else-if="studentInfo.sex === 2" type="success">女</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="毕业时间">{{studentInfo.graduateDate}}</el-descriptions-item>
              </el-descriptions>
              <el-divider></el-divider>
              <el-descriptions title="【学生扩展信息】" style="color:indianred;" direction="vertical" :column="1" border>
                <el-descriptions-item label="一寸照">
                  <template v-if="studentInfo.photo == null||studentInfo.photo == ''">
                    <el-image
                      style="width: 100px; height: 100px"
                      src="https://gxuwz-wnx.oss-cn-beijing.aliyuncs.com/images/%E9%BB%98%E8%AE%A4%E5%A4%B4%E5%83%8F"
                      fit="fit">
                    </el-image>
                  </template>
                  <template v-else>
                    <el-image
                      style="width: 100px; height: 100px"
                      :src="studentInfo.photo"
                      fit="fit">
                    </el-image>
                  </template>

                </el-descriptions-item>
                <el-descriptions-item label="学生性格">{{studentInfo.description}}</el-descriptions-item>
                <el-descriptions-item label="政治面貌">{{studentInfo.political}}</el-descriptions-item>
              </el-descriptions>
            </div>
            <!--个人信息文本-->
          </div>
        </el-col>
        <!--个人信息选项卡容器-->
        </el-card>
      </div>
      </el-dialog>
   <!--查看学生信息-->
  </div>
</template>
<script>

    import {pass,noPass,findCompanySend} from "@/api/send";
    import {findById} from "@/api/resume";
    import  {getStudentInfoById} from "@/api/student";

export default {
  name: "index",
  data() {
    return {
      activeNames:1,//Tab选项卡默认1
      pagination: {
        currentPage: 1,//当前页码
        pageSize: 10,//每页显示的记录数
        total: 0,//总记录数
        queryParams: {}//查询条件
      },//分页数据模型数
      dataList: [],//当前页要展示的分页列表数据
      formData: {},//表单数据
      delBtnStatus:true,//简历状态
      dialogFormVisible:false,//查看学生简历信息对象框是否可见
      dialogStudentInfoFormVisible:false,//学生信息框是否可见
      resume:{
        intentionList:[],
        projectList:[],
        trainList:[],
        certificateList:[],
        studentCadreList:[],
      },//简历对象
      studentInfo:{},//学生信息对象
      multipleSelection: [], //选中项数据的数组
    }
  },
  created() {
    this.findPage()
  },
  methods: {
    //处理表格勾选
    handleSelectionChange(val) {
      //获取用户勾选想赋值数据模型multipleSelection
      this.multipleSelection = val;
      //根据选中数判断批量删除按钮是否激活
      this.delBtnStatus = val.length === 0
    },
    //处理简历筛选通过
    handleResumePass(){
      //确定对简历信息逐一审核
      if (this.multipleSelection.length > 1){
        this.multipleSelection = []
        this.$notify({
          title: '警告',
          message: '请逐一对简历信息进行处理',
          type: 'warning'
        })
        return false ;
      }
      let send = JSON.parse(JSON.stringify(this.multipleSelection[0]))
      pass(send).then(res=>{
        this.$message({
          showClose: true,
          message: '恭喜你，操作成功',
          type: 'success',
          onClose: () => {}
        })
      })
      //刷新页面
      this.handleCurrentChange(1)
    },
    //处理简历筛选不通过
    handleResumeReject(){
      //确定对简历信息逐一审核
      if (this.multipleSelection.length > 1){
        this.multipleSelection = []
        this.$notify({
          title: '警告',
          message: '请逐一对简历信息进行处理',
          type: 'warning'
        })
        return false ;
      }
      let send = JSON.parse(JSON.stringify(this.multipleSelection[0]))
      noPass(send).then(res=>{
          this.$message({
            showClose: true,
            message: '恭喜你，操作成功',
            type: 'success',
            onClose: () => {
            }
        })
        //刷新页面
        this.handleCurrentChange(1)
      })
    },
    //弹出查看学生简历的方法
    handleSeeResume(row) {
      console.info("【======系统查看学生简历信息=====】")
      this.resetForm();
      findById(row.resumeId).then(res=>{
        this.resume = res.data;
      })
      this.dialogFormVisible = true;
      console.info("【系统成功查看学生简历信息！!!!】")
    },
    //查看学生信息的方法
    handleSeeStudentInfo(row){
      console.info("===系统正在查看学生信息中====");
      getStudentInfoById(row.studentId).then(res=>{
        this.studentInfo = res.data;
      })
      this.dialogStudentInfoFormVisible = true;
      console.info("====系统成功查看学生信息====");
    },
    //关闭学生信息窗口的方法
    handleSeeStudentInfoClose(){
      this.dialogStudentInfoFormVisible =false;
      this.resetForm();
    },
    //关闭学生简历窗口的方法
    handleSeeResumeClose() {
      //关闭新增表单对话框
      this.dialogFormVisible = false;
      //设置表单数据模型为空
      this.resetForm();
    },
    //重置表单的方法
    resetForm() {
      this.formData = {};
      this.studentInfo = {};
    },
    //改变每页显示的条数
    handleSizeChange(pageSize) {
      this.pagination.pageSize = pageSize
      //刷新表格
      this.findPage()
    },
    //切换页码
    handleCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage;
      this.findPage()
    },
    //处理分页查询的方法
    findPage() {
      findCompanySend(this.pagination).then(res=>{
        this.dataList = res.data.rows;
        this.pagination.total = res.data.total;
      })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
  }
}
</script>

<style scoped>
/*个人信息包裹容器*/
.profile-pre-wrapper {
  position: relative;
  color: #333;
  padding-bottom: 20px;
}
/*个人信息包裹容器*/

/*学生姓名*/
.profile-pre-name {
  margin-bottom: 24px;
  font-size: 32px;
  line-height: 32px;
  margin-top: 5px;
  padding-left: 25px;
}
/*学生姓名*/

/*学生标签*/
.profile-pre-name_jobDentity {
  margin-top: 3px;
  margin-left: 13px;
  padding: 0 5px;
  border: 1px solid #2888f3;
  border-radius: 1px;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #2888f3;
  letter-spacing: 0;
  line-height: 20px;
}
/*学生标签*/

/*格式清除*/
.clearfix {
  zoom: 1;
  display: block;
}

/*个人信息容器*/
.profile-pre-info {
  margin-bottom: 16px;
  font-size: 16px;
  line-height: 14px;
}
/*个人信息容器*/

/*个人信息文本*/
.profile-pre-info-txt {
  position: relative;
  padding: 0 24px;
}
/*个人信息文本*/

/*联系电话*/
.profile-pre-contact {
  margin-left: 20px;
  font-size: 16px;
  letter-spacing: .97px;
  line-height: 14px;
}
/*联系电话*/

/*编辑按钮*/
.profile-pre-edit {
  cursor: pointer;
  font-size: 14px;
  letter-spacing: 1.21px;
  position: absolute;
  top: 0;
  right: 0;
}
/*编辑按钮*/

/*咨询配图相关样式*/
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/*咨询配图相关样式*/

</style>
